import { Toast } from 'antd-mobile'
import './index.scss'
import { useEffect, useState, useRef } from 'react'
// 接口
import { getCitysList, getCitysHot } from '../../api/index.js'
// 获取定位的方法
import { getCurrentCity } from '../../utils'
// 长列表组件
import { List, AutoSizer } from 'react-virtualized'
// NavHeader组件
import NavHeader from '../../components/NavHeader'
// 数据格式化的方法
const formatCityData = list => {
  const cityList = {}
  list.forEach(item => {
    const first = item.short.substr(0, 1)
    if (cityList[first]) {
      cityList[first].push(item)
    } else {
      cityList[first] = [item]
    }
  })
  const cityIndex = Object.keys(cityList).sort()
  return {
    cityList,
    cityIndex
  }
}
// 处理字母索引的方法
const formatCityIndex = letter => {
  switch (letter) {
    case '#':
      return '当前定位'
    case 'hot':
      return '热门城市'
    default:
      return letter.toUpperCase()
  }
}

// 高度
const TITLE_HEIGHT = 36
const NAME_HEIGHT = 50
// 长列表
// const list = Array(100).fill('Brian Vaughn')
// 渲染每一行数据的渲染函数  返回值表示最终渲染在页面中的内容
// function rowRenderer({
//   key, // Unique key within array of rows
//   index, // 索引
//   isScrolling, // 当前项是否正在滚动  布尔值
//   isVisible, // 当前项在list中是可见的
//   style // 重点属性,一定要给每一个行数据添加改样式  作用:指定每一行的位置
// }) {
//   return (
//     <div key={key} style={style}>
//       {list[index]}
//     </div>
//   )
// }
const HOUSE_CITY = ['北京', '上海', '广州', '深圳']
const CityList = ({ history }) => {
  const cityListComponent = useRef(null)
  const [cityList, setCityList] = useState({})
  const [cityIndex, setCityIndex] = useState([])
  const [activeIndex, setActiveIndex] = useState(0) // 当前index 用于添加类名

  useEffect(() => {
    ;(async () => {
      // 获取城市列表
      await getcityList()
      // 组件ref实例方法 提前计算每一行的高度 ,实现精确跳转
      cityListComponent.current.measureAllRows()
    })()
  }, [])
  // 获取城市列表
  async function getcityList() {
    // 全部城市列表
    const res = await getCitysList()
    const { cityList, cityIndex } = formatCityData(res.data.body)
    // 添加热门城市
    const hot = await getCitysHot()
    cityList['hot'] = hot.data.body
    cityIndex.unshift('hot')
    // 获取当前定位城市
    const curCity = await getCurrentCity()
    cityList['#'] = [curCity]
    cityIndex.unshift('#')
    console.log(cityList, cityIndex, curCity)
    setCityList(cityList)
    setCityIndex(cityIndex)
  }

  // 改变城市
  const changeCity = ({ label, value }) => {
    if (HOUSE_CITY.indexOf(label) > -1) {
      // 有房源则保存到本地
      localStorage.setItem('hkzf_city', JSON.stringify({ label, value }))
      history.go(-1)
    } else {
      Toast.info('该城市暂无房源数据', 1, null, false)
    }
  }
  // 渲染每一行数据的渲染函数  返回值表示最终渲染在页面中的内容
  const rowRenderer = ({
    key, // Unique key within array of rows
    index, // 索引
    isScrolling, // 当前项是否正在滚动  布尔值
    isVisible, // 当前项在list中是可见的
    style // 重点属性,一定要给每一个行数据添加改样式  作用:指定每一行的位置
  }) => {
    // latter
    const latter = cityIndex[index]
    return (
      <div key={key} style={style} className="city">
        <div className="title">{formatCityIndex(latter)}</div>
        {cityList[latter].map(item => (
          <div
            className="name"
            key={item.value}
            onClick={() => changeCity(item)}
          >
            {item.label}
          </div>
        ))}
      </div>
    )
  }
  // 动态计算高度
  function getRowHeight({ index }) {
    return TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
  }
  // 封装渲染右侧索引列表的方法
  function renderCityIndex() {
    // 获取到 cityIndex，并遍历其，实现渲染
    return cityIndex.map((item, index) => (
      <li
        className="city-index-item"
        key={item}
        onClick={() => {
          // console.log('当前索引号：', index)
          // 跳转到对应index
          cityListComponent.current.scrollToRow(index)
        }}
      >
        <span className={activeIndex === index ? 'index-active' : ''}>
          {item === 'hot' ? '热' : item.toUpperCase()}
        </span>
      </li>
    ))
  }
  // 获取List组件渲染行的信息
  function onRowsRendered({ startIndex }) {
    if (activeIndex !== startIndex) {
      setActiveIndex(startIndex)
    }
  }
  return (
    <div className="citylist">
      {/* 顶部导航 */}
      <NavHeader>城市选择</NavHeader>
      {/* 城市列表 */}
      {/* 
    rowCount  行长度
    rowHeight  行高度
    rowRenderer 返回值代表每一行的ui
    onRowsRendered  每行的信息
    scrollToAlignment start 滚到顶部
    */}
      <AutoSizer>
        {({ height, width }) => (
          <List
            ref={cityListComponent}
            width={width}
            height={height}
            rowCount={cityIndex.length}
            rowHeight={getRowHeight}
            rowRenderer={rowRenderer}
            onRowsRendered={onRowsRendered}
            scrollToAlignment="start"
          />
        )}
      </AutoSizer>
      {/* 右侧索引列表 */}
      <ul className="city-index">{renderCityIndex()}</ul>
    </div>
  )
}

export default CityList
